<template>
    <n-page-header @back="handleBack">
        <template #title>
            {{  examInfo.title  }}
        </template>
        <template #subtitle>
            <n-space>
                <n-tag type="info" v-if="new Date(examInfo.startTime) > new Date()">
                    未开始
                </n-tag>
                <n-tag type="success"
                    v-if="new Date(examInfo.endTime) > new Date() && new Date(examInfo.startTime) < new Date()">
                    进行中
                </n-tag>
                <n-tag type="error" v-if="new Date(examInfo.endTime) < new Date()">
                    已结束
                </n-tag>
                <n-button size="small" @click="handleCountQuestion">
                    题目统计
                </n-button>
            </n-space>
        </template>
        <template #footer>

        </template>
    </n-page-header>
    <div ref="finishchartDom" style="width:100%;height:100px"></div>
    <div ref="countchartDom" style="width:100%;height:200px"></div>
    <n-table :single-line="false" size="small" striped>
        <thead>
            <tr>
                <th>学号</th>
                <th>名字</th>
                <th>班级</th>
                <th>积分</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="studentExam in studentExamList">
                <tr>
                    <td>{{  studentExam.SID  }}</td>
                    <td>{{  studentExam.studentName  }}</td>
                    <td>{{  studentExam.claseName  }}</td>
                    <td v-if='studentExam.credit'>
                        {{  studentExam.credit  }}
                    </td>
                    <td v-else>
                        <n-text type="error">未参加</n-text>
                    </td>
                    <td>
                        <n-button @click="showStudentDetail(studentExam.SID)" :disabled="studentExam.credit == null">阅卷
                        </n-button>
                    </td>
                </tr>
            </template>
        </tbody>
    </n-table>
    <n-modal v-model:show="showModal" preset="card" title="学生答案" style="height:100vh" class="overflow-scroll">
        <answer :SID="modalSID" :EID="route.params.EID"/>
    </n-modal>
    <n-modal v-model:show="showQuestionModal" preset="card" title="学生答案" style="height:100vh" class="overflow-scroll">
        <CountQuestions :EID="route.params.EID"/>
    </n-modal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { countExam, getExam } from '@/api/teacher/exam';
import { useRoute, useRouter } from 'vue-router';
import answer from './answer.vue';
import CountQuestions from './countQuestions.vue'
import * as echarts from 'echarts';

const showModal = ref(false);
const showQuestionModal = ref(false);
const studentExamList = ref();
const route = useRoute();
const router = useRouter();
const echartOption: any = ref({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['未完成', '已完成',]
    },
    grid: {
        containLabel: true
    },
    xAxis: [
        {
            type: 'value'
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            data: ['人数']
        }
    ],
    series: [
        {
            name: '未完成',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '已完成',
            type: 'bar',
            stack: 'Total',
            label: {
                show: true,
                position: 'right'
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        }
    ]
})

const gradeCountOption: any = ref({
    title: {
        text: '成绩分布图',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [
        {
            name: '分布',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 0, name: '优秀' },
                { value: 0, name: '合格' },
                { value: 0, name: '不合格' },
                { value: 0, name: '未完成' },
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
})

const examInfo = ref({
    title: '',
    startTime: new Date(),
    endTime: new Date(),
    credit: 0
});

function handleBack() {
    router.go(-1);
}

const modalSID = ref();
function showStudentDetail(SID) {
    modalSID.value = SID;
    showModal.value = true;
}

const finishchartDom = ref();
const countchartDom = ref();

const handleCountQuestion= () => {
    showQuestionModal.value = true;
}

onMounted(async () => {
    studentExamList.value = await countExam({ EID: route.params.EID })
    let studentFinishNumber = 0;
    let studentUnFinishNumber = 0;

    // let finishchartDom: any = document.getElementById('finshChart');
    let finshChart = echarts.init(finishchartDom.value);

    // let countchartDom: any = document.getElementById('gradeCount');
    let gradeCount = echarts.init(countchartDom.value);

    examInfo.value = await getExam({ EID: route.params.EID });

    console.log(gradeCountOption.value);
    for (let studentExam in studentExamList.value) {
        if (studentExamList.value[studentExam]['credit']) {
            studentFinishNumber++;
            if (studentExamList.value[studentExam]['credit'] >= examInfo.value.credit * 0.8) { gradeCountOption.value.series[0].data[0].value++; studentUnFinishNumber++; }
            else if (studentExamList.value[studentExam]['credit'] >= examInfo.value.credit * 0.6) { gradeCountOption.value.series[0].data[1].value++; studentUnFinishNumber++; }
            else { gradeCountOption.value.series[0].data[2].value++; studentUnFinishNumber++; }
        }
        else {
            studentFinishNumber++;
            gradeCountOption.value.series[0].data[3].value++;
        }
        echartOption.value.series[0].data[0] = studentFinishNumber;
        echartOption.value.series[1].data[0] = studentUnFinishNumber;
        finshChart.setOption(echartOption.value);
        gradeCount.setOption(gradeCountOption.value);
    }
})
</script>